AJAX簡介

可與伺服器進行非同步更新，透過瀏覽器應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。

可以不用每次更新來取得資料，可以寫JavaScript後，就可以跟後端撈資料完，再傳回JavaScript做判斷後，就可以印出網頁等。

透過 XMLHttpRequest 物件跨瀏覽器撈資料

宣告 xhr ，先產生 XMLHttpRequest 準備要去跟對方要資料

var xhr = new XMLHttpRequest();

在瀏覽器打 xhr 點開裡頭有各種格式出現

.open 寫法

xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

open 裡面參數 ('格式','要讀取的網址','同步與非同步')

• 格式 : get 讀取資料 、 post 傳送資料到伺服器
• 要讀取的網址 : json檔使用六角學院練習範例檔案
• 同步與非同步 : true 非同步 、 false 同步

.send

xhr.send(null);

傳送一個空值，把遠端的 data.json 資料撈過來，檢查 xhr ，readyState狀態變成4，responseText也抓到資料，responseURL也正確抓到網址，資料都已經抓取。

readyState 狀態

• 0 : 已經產生一個 XMLHttpRequest，但是還沒有連結要撈的資料
• 1 : 已經用 .open()，但還沒有把資料傳送回來
• 2 : 偵測已用 .send()
• 3 : loading中
• 4 : 已經撈到資料，數據已經傳送回來

AJAX非同步觀念

AJAX在讀取資料有同步與非同步

• true 非同步，不會等資料傳回來就讓程式繼續往下跑，等到回傳才會自動回傳
• false 同步，會等資料傳回來才讓程式繼續往下跑
  使用時機 :
  大型專案或檔案很大的程式碼都會用非同步來節省時間跟效率，簡易檔案小可即時的就適合用同步

.onload

使用非同步都等不到資料回傳就跑完程式碼，如果想要觸發事件，可用 .onload()，它會確認撈完資料才會去執行，以下練習 :

1. 寫入 xhr.onload 然後去觸發帶入data的函式
2. 可以先 console.log(xhr.responseText); 確認有沒有抓到資料
3. 宣告 str， 並用 JSON.parse 把 xhr.responseText 陣列化，方便後續資料應用
4. 選定 html 的 .message 標籤，抓取陣列第一筆印出來

xhr.onload = function(data) {
   console.log(xhr.responseText);
   var str = JSON.parse(xhr.responseText);
   document.querySelector('.message').textContent = str[0].name;
};

小結

1. 建立一個 XMLHttpRequest
2. 傳送對方伺服器要資料
3. 回傳資料到自己伺服器
4. 拿到資料再作處理，如讀取、比對、重新增加等等等